<template>
  <view>
    <view class="sww-goods-action-box" v-if='show'>
      <view class="sww-goods-action" :style="customStyle"></view>
    </view>
    <view class="sww-goods-action-box box-fixed u-border-top">
      <view class="sww-goods-action" :style="customStyle">
        <slot></slot>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    customStyle: {
      type: String,
      default: () => {
        return 'height: 100rpx'
      }
    },
	show: {
	  type: Boolean,
	  default: true
	},
    zIndex: {
      type: [String, Number],
      default: 1,
      validate: (val) => parseInt(val)
    }
  }
}
</script>
<style lang="scss" scoped>
  .sww-goods-action-box {
    width: 100%;
    box-sizing: content-box;
    padding-bottom: env(safe-area-inset-bottom);
	  &.box-fixed {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #ffffff;
		z-index: 100;
	  }
  }
  .sww-goods-action {
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
</style>
